<template>
  <div class="login w100 flex">
    <div class="login-content h100 flex-ai-jc-center">
      <div class="form-content">
        <h3 style="color: #409eff;">my学生管理系统 | 登录</h3>
        <!-- 表单 -->
        <!-- model:必填属性，绑定表单中的各个表单控件的数据 -->
        <!-- prop:必填属性，标记哪个form-item -->
        <el-form :rules="loginFormRules" :model="loginForm" label-position="top" label-width="80px" ref="loginFormRef"
          hide-required-asterisk>

          <el-form-item label="账号" prop="userName">
            <template #label>
              <div class="label-row">
                <span :class="['title', { active: loginFormActive.userName }]">账号</span>
                <span :class="['placeholder', { active: loginFormActive.userName }]"
                  @click="handleLoginInputPlaceholder('userName')">账号</span>
              </div>
            </template>
            <el-input v-model="loginForm.userName" prefix-icon="el-icon-user" @focus="loginInputFocus('userName')"
              @blur="loginInputBlur('userName')" ref="userNameRef"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <template #label>
              <div class="label-row">
                <span :class="['title', { active: loginFormActive.password }]">密码</span>
                <span :class="['placeholder', { active: loginFormActive.password }]"
                  @click="handleLoginInputPlaceholder('password')">密码</span>
              </div>
            </template>
            <el-input v-model="loginForm.password" prefix-icon="el-icon-view" @blur="loginInputBlur('password')"
              @focus="loginInputFocus('password')" ref="passwordRef"></el-input>
          </el-form-item>

          <el-form-item label="验证码" prop="code">
            <template #label>
              <div class="label-row">
                <span :class="['title', { active: loginFormActive.code }]">验证码</span>
                <span :class="['placeholder', { active: loginFormActive.code }]"
                  @click="handleLoginInputPlaceholder('code')">验证码</span>
              </div>
            </template>
            <el-row type="flex" justify="space-between">
              <el-input v-model="loginForm.code" prefix-icon="el-icon-s-marketing" @focus="loginInputFocus('code')"
                @blur="loginInputBlur('code')" style="width: 40%;" ref="codeRef"></el-input>
              <div class="code" v-html="captchaImageInfo.captchaImage"></div>
            </el-row>
          </el-form-item>

          <el-form-item>
            <el-row type="flex" justify="space-between">
              <el-button type="primary" @click="handleLogin">登录</el-button>
              <div>
                没有账号？
                <el-button type="text">
                  <router-link to="/register" tag="span">立即注册</router-link>
                </el-button>
              </div>
            </el-row>
          </el-form-item>

        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { captchaImage, login } from '@/api/user';
import { setToken } from '@/utils/cookies';
export default {
  name: 'Login',
  components: {},
  data() {
    return {
      // 表单
      loginForm: {
        userName: undefined,
        password: undefined,
        code: undefined,
      },

      // 校验
      loginFormRules: {
        userName: [
          {
            required: true,//必填属性
            message: "请输入用户名",//校验提示
            trigger: "blur",//触发事件
          }
        ],
        password: [
          {
            required: true,//必填属性
            message: "请输入密码",//校验提示
            trigger: "blur",//触发事件
          }
        ],
        code: [
          {
            required: true,//必填属性
            message: "请输入验证码",//校验提示
            trigger: "blur",//触发事件
          }
        ],

      },

      // 验证码
      captchaImageInfo: {},

      // 登录动态效果
      loginFormActive: {
        userName: false,
        password: false,
        code: false,
      },


      // 登录动态效果
      // isActive: false,
    }
  },

  created() {
    this.getCaptchaImage()
  },

  methods: {
    // 登录
    handleLogin() {
      // 422:参数缺失/参数名和后端需要的字段名不一致....
      //没有输入值直接点击登录，表单的默认值是undefined,而浏览器会自动过滤掉值为undefined的参数
      this.$refs["loginFormRef"].validate((valid) => {
        console.log(valid);
        // 校验不通过不发送请求
        if (!valid) return

        //传递的参数一定要和后端规定的一致
        const { uuid } = this.captchaImageInfo
        login({ ...this.loginForm, uuid })
          .then(res => {
            // 确保.then接收状态为200的数据 resolve
            console.log("11111111", res);

            this.$message.success(res.msg)
            // 存储token
            setToken(res.data.token)
            // 跳转到首页
            this.$router.push("/home")
          })
          .catch(err => {
            /*reject*/
            //更新验证码
            this.getCaptchaImage()
          })
      })
    },


    // 获取验证码
    getCaptchaImage() {
      captchaImage().then(res => {
        console.log(res);
        this.captchaImageInfo = res.data
      })
    },


    // 聚焦
    loginInputFocus(val) {
      this.loginFormActive[val] = true
      // this.isActive = true
    },
    // 失焦
    loginInputBlur(val) {
      // 输入框有值时return出去避免占位文本回到输入框
      if (this.loginForm[val]) return
      this.loginFormActive[val] = false
      // this.isActive = false
    },

    // 点击提示语
    handleLoginInputPlaceholder(refName) {
      // 实现触发输入框的聚焦事件
      // 父向子访问 ref+$refs
      console.log(refName);
      this.$refs[`${refName}Ref`].focus()

    }

  }
}
</script>

<style lang="scss" scoped>
.login {
  height: 100vh;
  background-image: url("http://mashang.eicp.vip:5557/student/v3/admin/img/login-bg.d7992b58.jpg");
  background-size: 100% auto;
  justify-content: flex-end;

  // 修改elementUI样式
  ::v-deep .el-input__prefix {
    height: 50%;
  }


  .login-content {
    width: 800px;
    background-color: #fff;
    border-radius: 50% 0 0 50%;

    .form-content {
      width: 300px;

      .code {
        height: 40px;
      }

      .label-row {
        position: relative;
        width: 80px;

        span {
          display: inline-block;
          width: 3em;
          font-size: 14px;
          transition: 0.5s;

          &.title {
            color: #909399;
            font-weight: bold;
            opacity: 1;

            &.active {
              opacity: 0;
            }
          }

          &.placeholder {
            position: absolute;
            top: 50px;
            left: 30px;
            z-index: 1;
            color: #c4c5c8;
            cursor: text;

            &.active {
              top: 0;
              left: 0;
              color: #66b1ff;
              font-weight: bold;
            }
          }
        }
      }

    }

  }


}
</style>
